<script setup>
import {defineProps} from 'vue'
import {useRouter} from "vue-router";

const router = useRouter()
const itemClick = () => {
	router.push({
		path: '/detail',
		query: {id: props.product.id}
	})
}
const props = defineProps({
	product: Object,
	default() {
		return []
	}
})
</script>

<template>
	<div class="goods-item" @click="itemClick">
		<img v-lazy="props.product.cover_url" alt="" src="">
		<div class="goods-info">
			<p>{{ props.product.title }}</p>
			<span class="price"><small>￥</small>{{ props.product.price }}</span>
			<span class="collect">{{ props.product.collects_count }}</span>
		</div>
	</div>
</template>

<style lang="scss" scoped>
.goods-item {
	width: 46%;
	padding-bottom: 40px;
	position: relative;

	img {
		width: 100%;
		border-radius: 5px;
	}

	.goods-info {
		font-size: 12px;
		position: absolute;
		bottom: 5px;
		left: 0;
		right: 0;
		overflow: hidden;
		text-align: center;

		p {
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			margin-bottom: 3px;
		}

		.price {
			color: red;
			margin-right: 20px;
		}

		.collect {
			position: relative;
		}

		.collect::before {
			content: '';
			position: absolute;
			left: -15px;
			top: -1px;
			width: 14px;
			height: 14px;
			background: url('@/assets/images/collect.svg') 0 0/14px 14px;
		}
	}
}
</style>